<template>
    <el-pagination
        class="base-pagination"
        v-model:currentPage="paginationData.pageNum"
        @update:currentPage="pageNumUpdate"
        v-model:pageSize="paginationData.pageSize"
        @update:pageSize="pageSizeUpdate"
        :total="paginationData.total"
        v-bind="{
            ...opts,
            ...attrs
        }"
    ></el-pagination>
</template>

<script setup>
import { useAttrs } from 'vue'

defineOptions({
    name: 'BasePagination',
    inheritAttrs: false
})

const props = defineProps({
    paginationData: {
        type: Object,
        default: () => ({
            pageNum: 1,
            pageSize: 20,
            total: 0
        })
    }
})

const opts = {
    background: true,
    layout: `total, sizes, prev, pager, next, jumper`,
    pagerCount: 7,
    pageSizes: [20, 50, 100, 200]
}

const emit = defineEmits(['paginationChange'])

const attrs = useAttrs()

const pageNumUpdate = val => {
    emit('paginationChange', { type: 'pageNum', val })
}

const pageSizeUpdate = val => {
    props.paginationData.pageNum = 1
    emit('paginationChange', { type: 'pageSize', val })
}
</script>

<style lang="scss" scoped></style>